<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <!--    添加对应的依赖 -->
    <script src="/pages/base.js"></script>
    <!--    ztree 的css -->
    <link rel="stylesheet" href="/css/zTreeStyle.css" type="text/css">

    <!--    ztree 对应的js -->
    <script type="text/javascript" src="/js/jquery.ztree.core.min.js"></script>
    <script type="text/javascript" src="/js/jquery.ztree.excheck.js"></script>

</head>
<body>

<!--
    ul标签
    id          唯一标识  treeDemo
    ztree       样式
-->
<div>
    <ul id="treeDemo" class="ztree"></ul>
</div>

<script>

    //1. ztree的设置
    var setting = {
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };

    let app = new Vue({
        el:"#app",
        data:{

        },
        methods:{
            findPermission(){
                axios({
                    method:"GET",
                    url:"http://localhost:8080/permission"

                }).then(resp=>{
                    console.log(resp)
                    let zNodes = resp.data;
                    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                })
            }
        },
        created(){
            this.findPermission();
        }
    })

</script>

</body>
</html>